<template>
  <div>
    <div class="form">
        <!-- 游戏区服 -->
        <div class="form-item">
            <text class="label">游戏区服</text>
            <el-cascader placeholder="请选择您所在的区服" v-model="formData.selectedServer" :options="serverTree"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showServerPicker">
                <view class="selected-tag">
                    {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 排位类型 -->
        <div class="form-item">
            <text class="label">排位类型</text>
            <el-select v-model="formData.rankType" placeholder="请选择组排方式" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in rankTypeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showRankTypePicker">
                <view class="selected-tag">
                    {{ rankType || '请选择组排方式' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 陪练类型 -->
        <div class="form-item">
            <text class="label">陪练类型</text>
            <el-select v-model="formData.sparringType" placeholder="请选择陪练类型" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in sparringTypeTree" :key="index" :label="item.text"
                    :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showSparringTypePicker">
                <view class="selected-tag">
                    {{ sparringType || '请选择陪练类型' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 当前段位 -->
        <div class="form-item" v-if="formData.sparringType == '场次' | formData.sparringType == '女神陪练'">
            <text class="label">当前段位</text>
            <el-cascader placeholder="请选择当前段位" v-model="formData.currentTask" :options="Task"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showCurrentTaskTypePicker">
                <view class="selected-tag">

                    {{ (currentTask === '') ? '请选择角色当前的段位' :
                        `${currentTask}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 时长选择 -->
        <div class="form-item" v-if="formData.sparringType == '女神陪练'">
            <text class="label">时长选择</text>
            <el-select v-model="formData.duration" placeholder="请选择需要陪练的时长" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in durationTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showDurationPicker">
                <view class="selected-tag">

                    {{ (duration === '') ? '请选择需要陪练的时长' :
                        `${duration}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 场次选择 -->
        <div class="form-item" v-if="formData.sparringType == '场次'">
            <text class="label">场次选择</text>
            <el-select v-model="formData.session" placeholder="请选择需要陪练的场次" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in sessionTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showSessionPicker">
                <view class="selected-tag">

                    {{ (session === '') ? '请选择需要陪练的场次' :
                        `${session}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 上赛季段位 -->
        <div class="form-item" v-if="formData.sparringType == '定位赛'">
            <text class="label">上赛季段位</text>
            <el-select v-model="formData.beforeLevel" placeholder="请选择上赛季段位" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in beforeLevelTree" :key="index" :label="item.text"
                    :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showBeforeLevelPicker">
                <view class="selected-tag">
                    {{ beforeLevel || '请选择上赛季段位' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 需打场次 -->
        <div class="form-item" v-if="formData.sparringType == '定位赛'">
            <text class="label">需打场次</text>
            <el-select v-model="formData.needGames" placeholder="请选择需打场次" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in needGamesTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showNeedGamesPicker">
                <view class="selected-tag">

                    {{ (needGames === '') ? '请选择需打场次' :
                        `${needGames}` }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 游戏角色 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏角色</text>
            <el-input v-model="formData.username" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏角色名" />
        </div>
        <!-- 号主手机（必填） -->
        <div class="form-item" v-if="showOrder">
            <text class="label">号主手机（必填）</text>
            <el-input v-model="formData.phone" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的手机号" />
        </div>
    </div>

    <!-- 游戏区服选择弹窗 -->
    <el-dialog v-model="serverPopup" title="请选择游戏区服" width="1000" :before-close="hideServerPicker">
        <div class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div class="popup-nav">
                    <div v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                        :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                        {{ group.text }}
                    </div>
                </div>

                <!-- 右侧选择内容 -->
                <div class="popup-scroll">
                    <div v-if="selectedGroupIndex !== null" class="popup-group">
                        <div v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                            class="popup-item" @click="selectServerItem(item)">
                            {{ item.text }}
                        </div>
                    </div>
                    <div v-else class="popup-empty">请选择左侧分类</div>
                </div>
            </div>
        </div>
    </el-dialog>
    <!-- 排位类型选择弹窗 -->
    <el-dialog v-model="rankTypePopup" width="1000" :before-close="hideRankTypePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in rankTypeTree" :key="index" class="popup-item"
                    @click="selectRankTypeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 陪练类型选择弹窗 -->
    <el-dialog v-model="sparringTypePopup" width="1000" :before-close="hideSparringTypePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in sparringTypeTree" :key="index" class="popup-item"
                    @click="selectSparringTypeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 时长选择器弹窗 -->
    <el-dialog v-model="durationPopup" width="1000" :before-close="hideDurationPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in durationTree" :key="index" class="popup-item"
                    @click="selectDurationItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 场次选择器弹窗 -->
    <el-dialog v-model="sessionPopup" width="1000" :before-close="hideSessionPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in sessionTree" :key="index" class="popup-item"
                    @click="selectSessionItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 当前段位选择弹窗 -->
    <el-dialog v-model="currentTaskTypePopup" title="请选择当前段位" width="1000" :before-close="hideCurrentTaskTypePicker">
        <view class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div scroll-y class="popup-nav">
                    <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                        :class="{ active: currentTaskGroupIndex === groupIndex }"
                        @click="selectCurrentTaskGroup(groupIndex)">
                        {{ group.text }}
                    </view>
                </div>

                <!-- 右侧选择内容 -->
                <div scroll-y class="popup-scroll">
                    <view v-if="currentTaskGroupIndex !== null" class="popup-group">
                        <view v-for="(item, itemIndex) in Task[currentTaskGroupIndex].children" :key="itemIndex"
                            class="popup-item">
                            <div class="popup-item-title">{{ item.text }}</div>
                            <div class="popup-item-body">
                                <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                    @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item">
                                    <span>{{ item2.text }}</span>
                                </view>
                            </div>
                        </view>
                    </view>
                    <view v-else class="popup-empty">请选择左侧分类</view>
                </div>
            </div>
        </view>
    </el-dialog>
    <!-- 上赛季段位选择弹窗 -->
    <el-dialog v-model="beforeLevelPopup" width="1000" :before-close="hideBeforeLevelPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in beforeLevelTree" :key="index" class="popup-item"
                    @click="selectBeforeLevelItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 需打场次选择器弹窗 -->
    <el-dialog v-model="needGamesPopup" width="1000" :before-close="hideNeedGamesPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                    @click="selectNeedGamesItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 订单信息区域 -->
    <!-- <div class="orderMsg">
        <div class="pay">
            <img src="../../assets/icons/pay.png"></img>
            <div class="text">建议出价 <span style="color: red;">87元</span></div>
        </div>
        <div class="time">
            <img src="../../assets/icons/time.png"></img>
            <div class="text">预计时限 <span style="color: red;">47小时</span></div>
        </div>
    </div> -->
    <!-- 底部按钮 -->
    <!-- <div class="footer">
        <div class="button" @click="submitOrder()">下一步</div>
    </div> -->
    <div class="special-task" @click="changeShowOrder" v-if="!showOrder">
        <div class="label">预约下单</div>
    </div>
    <PLYXLMsubmitOrder v-if="showOrder" :formDataInput="formData"></PLYXLMsubmitOrder>
  </div>
</template>
<script>
import PLYXLMsubmitOrder from '../../views/PL/YXLMsubmitOrder/index.vue';

export default {
  name: 'YXLMPL',
  components: {
    PLYXLMsubmitOrder
  },
  data() {
    return {
      showOrder: false,
      // 区服数据
      serverTree: [
        {
          label: '电信',
          value: "电信",
          children: [
            { label: '艾欧尼亚', value: "艾欧尼亚" },
            { label: '祖安', value: "祖安" },
            { label: '诺克萨斯', value: "诺克萨斯" },
            { label: '班德尔城', value: "班德尔城" },
            { label: '皮尔特沃夫', value: "皮尔特沃夫" },
            { label: '战争学院', value: "战争学院" },
            { label: '巨神峰', value: "巨神峰" },
            { label: '雷瑟守备', value: "雷瑟守备" },
            { label: '裁决之地', value: "裁决之地" },
            { label: '黑色玫瑰', value: "黑色玫瑰" },
            { label: '暗影岛', value: "暗影岛" },
            { label: '钢铁烈阳', value: "钢铁烈阳" },
            { label: '均衡教派', value: "均衡教派" },
            { label: '水晶之痕', value: "水晶之痕" },
            { label: '影流', value: "影流" },
            { label: '守望之海', value: "守望之海" },
            { label: '征服之海', value: "征服之海" },
            { label: '卡拉曼达', value: "卡拉曼达" },
            { label: '皮城警备', value: "皮城警备" },
          ]
        },
        {
          label: '网通',
          value: "网通",
          children: [
            { label: '比尔吉沃特', value: "比尔吉沃特" },
            { label: '德玛西亚', value: "德玛西亚" },
            { label: '弗雷尔卓德', value: "弗雷尔卓德" },
            { label: '无畏先锋', value: "无畏先锋" },
            { label: '恕瑞玛', value: "恕瑞玛" },
            { label: '扭曲丛林', value: "扭曲丛林" },
            { label: '巨龙之巢', value: "巨龙之巢" }
          ]
        },
        {
          label: '全网络',
          value: "全网络",
          children: [
            { label: '男爵领域', value: "男爵领域" },
            { label: '峡谷之巅', value: "峡谷之巅" }
          ]
        },
        {
          label: '其它',
          value: "其它",
          children: [
            { label: '教育网专区', value: "教育网专区" }
          ]
        },
      ],
      selectedServer: "艾欧尼亚",
      selectedGroupIndex: 0,
      serverPopup: false,
      // 排位类型数据
      rankTypeTree: [
        { text: '单双排', value: "单双排" },
        { text: '灵活组排', value: "灵活组排" }
      ],
      rankType: "",
      rankTypePopup: false,
      // 陪练类型数据
      sparringTypeTree: [
        { text: '场次', value: "场次" },
        { text: '定位赛', value: "定位赛" },
        { text: '女神陪练', value: "女神陪练" },
      ],
      sparringType: "场次",
      sparringTypePopup: false,
      // 时长数据
      durationTree: [
        { text: '2小时', value: "2小时" },
        { text: '3小时', value: "3小时" },
        { text: '4小时', value: "4小时" },
        { text: '5小时', value: "5小时" },
        { text: '6小时', value: "6小时" },
        { text: '7小时', value: "7小时" },
        { text: '8小时', value: "8小时" },
        { text: '9小时', value: "9小时" },
        { text: '10小时', value: "10小时" }
      ],
      duration: "",
      durationPopup: false,
      // 场次数据
      sessionTree: [
        { text: '1场', value: "1场" },
        { text: '2场', value: "2场" },
        { text: '3场', value: "3场" },
        { text: '4场', value: "4场" },
        { text: '5场', value: "5场" },
        { text: '6场', value: "6场" },
        { text: '7场', value: "7场" },
        { text: '8场', value: "8场" },
        { text: '9场', value: "9场" },
        { text: '10场', value: "10场" }
      ],
      session: "",
      sessionPopup: false,
      // 段位数据
      Task: [],
      currentTask: "",
      currentTaskGroupIndex: 0,
      currentTaskTypePopup: false,
      // 上赛季段位数据
      beforeLevelTree: [
        { text: '新号', value: "新号" },
        { text: '黑铁', value: "黑铁" },
        { text: '青铜', value: "青铜" },
        { text: '白银', value: "白银" },
        { text: '黄金', value: "黄金" },
        { text: '铂金', value: "铂金" },
        { text: '翡翠', value: "翡翠" },
        { text: '钻石', value: "钻石" },
        { text: '大师', value: "大师" },
      ],
      beforeLevel: "",
      beforeLevelPopup: false,
      // 需打场次数据
      needGamesTree: [
        { text: '1场', value: "1场" },
        { text: '2场', value: "2场" },
        { text: '3场', value: "3场" },
        { text: '4场', value: "4场" },
        { text: '5场', value: "5场" },
        { text: '6场', value: "6场" },
        { text: '7场', value: "7场" },
        { text: '8场', value: "8场" },
        { text: '9场', value: "9场" },
        { text: '10场', value: "10场" }
      ],
      needGames: "",
      needGamesPopup: false,
      // 订单提交数据
      formData: {
        selectedServer: '',
        rankType: '',
        sparringType: '场次',
        currentTask: '',
        duration: '',
        session: '',
        beforeLevel: '',
        needGames: '',
        username: '',
        phone: '',
      }
    };
  },
  methods: {
    changeShowOrder() {
      this.showOrder = !this.showOrder;
    },
    showServerPicker() {
      this.serverPopup = true;
    },
    hideServerPicker() {
      this.serverPopup = false;
    },
    selectGroup(index) {
      this.selectedGroupIndex = index;
    },
    selectServerItem(item) {
      this.selectedServer = item.value;
      this.hideServerPicker();
    },
    showRankTypePicker() {
      this.rankTypePopup = true;
    },
    hideRankTypePicker() {
      this.rankTypePopup = false;
    },
    selectRankTypeItem(item) {
      this.formData.rankType = item.value;
      this.hideRankTypePicker();
    },
    showSparringTypePicker() {
      this.sparringTypePopup = true;
    },
    hideSparringTypePicker() {
      this.sparringTypePopup = false;
    },
    selectSparringTypeItem(item) {
      this.formData.sparringType = item.value;
      this.hideSparringTypePicker();
    },
    showDurationPicker() {
      this.durationPopup = true;
    },
    hideDurationPicker() {
      this.durationPopup = false;
    },
    selectDurationItem(item) {
      this.formData.duration = item.value;
      this.hideDurationPicker();
    },
    showSessionPicker() {
      this.sessionPopup = true;
    },
    hideSessionPicker() {
      this.sessionPopup = false;
    },
    selectSessionItem(item) {
      this.formData.session = item.value;
      this.hideSessionPicker();
    },
    createTaskList() {
      const tiers = ['黑铁', '青铜', '白银', '黄金', '铂金', '翡翠', '钻石', '大师'];
      const taskList = [];
      tiers.forEach(tier => {
        let tierItem = {
          label: tier,
          value: tier,
          children: []
        };
        let subTierItem = {
          label: `${tier}`,
          value: `${tier}`,
          children: []
        };
        const stars = Array.from({ length: 5 }, (_, index) => ({
          label: `${index}`,
          value: `${index}`
        }));
        subTierItem.children = stars;
        tierItem.children.push(subTierItem);
        taskList.push(tierItem);
      });
      this.Task = taskList;
    },
    selectCurrentTaskGroup(index) {
      this.currentTaskGroupIndex = index;
    },
    selectCurrentTaskItem(text1, text2) {
      this.currentTask = `${text1} ${text2}`;
      this.hideCurrentTaskTypePicker();
    },
    showCurrentTaskTypePicker() {
      this.currentTaskTypePopup = true;
    },
    hideCurrentTaskTypePicker() {
      this.currentTaskTypePopup = false;
    },
    showBeforeLevelPicker() {
      this.beforeLevelPopup = true;
    },
    hideBeforeLevelPicker() {
      this.beforeLevelPopup = false;
    },
    selectBeforeLevelItem(item) {
      this.formData.beforeLevel = item.value;
      this.hideBeforeLevelPicker();
    },
    showNeedGamesPicker() {
      this.needGamesPopup = true;
    },
    hideNeedGamesPicker() {
      this.needGamesPopup = false;
    },
    selectNeedGamesItem(item) {
      this.formData.needGames = item.value;
      this.hideNeedGamesPicker();
    },
    submitOrder() {
      console.log("提交订单", this.formData);
    }
  },
  mounted() {
    this.createTaskList();
  }
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
    height: 45px;
}
.special-task {
    width: 40%;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* margin-top: 5px; */
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: 50px auto;
    /* margin-left: 20px; */
}


.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}
/* 表单样式 */
.form {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #fff;
}

.form-item {
    width: 20%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.form-item .label {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}

.form-item .handle {
    width: 70%;

}

.picker,
.input {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.selected-tag img {
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    border: 1px solid #ccc;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 40px;
}

.picker {
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus {
    border-color: #388aff;
    box-shadow: 0 0 10px rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.time-selector {
    display: flex;
    align-items: center;
}

.time-scroll {
    overflow-y: auto;
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.time-scroll .date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #333;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item {
    cursor: pointer;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item.selected {
    color: #4080ff;
    font-weight: bold;
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    width: 70%;
    outline: none;
    border: none;
    font-size: 20px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
}

.popup-content .body {
    display: flex;
    height: 500px;
}

.popup-nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    /* 根据需要调整宽度 */
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.nav-item {
    padding: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

.nav-item.active {
    color: #388aff;
    font-weight: bold;
    border-left: 4px solid #388aff;
    padding-left: 16px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: #999;
}

.popup-group {
    margin-bottom: 20px;
    max-height: 100%;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    box-sizing: border-box;

}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.orderMsg {
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 200px;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay img,
.orderMsg .time img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 20px;
    font-weight: 700;
}

.footer {
    width: 60%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 25px;
}

.footer .tip {
    width: 100%;
    color: #aaa;
    background-color: #eee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button {
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all .3s;
}

.footer .button:hover {
    background: #3e91ff;
    cursor: pointer;
}
</style>